<template>
  <div style="z-index: 999">
    <el-dialog
      :visible.sync="positiongShow"
      :title="toTraCode + '车辆跟踪'"
      width="50%"
      center
    >
      <div class="dialog-content">
        <div
          id="posmap"
          style="height: 700px; width: 100%"
          class="posMap"
        ></div>
      </div>

      <div
        class="markerStyle flex"
        ref="pop"
        :style="{ width: popdata.showde ? '400px' : '170px' }"
        v-show="popdata.show"
      >
        <div class="markerStyleLeft">
          <p>车牌：{{ popdata.hbCarNo }}</p>
          <p>时间：{{ popdata.gpsTime }}</p>
          <p>ACC：{{ popdata.accState == 1 ? "ACC开" : "ACC关" }}</p>
          <p>速度：{{ popdata.speed }}(km/h)</p>
          <p>油量：{{ popdata.oil }}</p>
          <p>里程：{{ popdata.mileage }}</p>
          <p>位置：{{ popdata.curAddress }}</p>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    toTraCode: "",
  },
  data() {
    return {
      positiongShow: false,
      popdata: { show: false },
    };
  },
  watch: {},
  mounted() {},

  methods: {
    // 初始化高德地图
    initmap(val) {
      this.posmap = new AMap.Map("posmap", {
        //设置地图容器id
        viewMode: "3D", //是否为3D地图模式
        zoom: 13, //初始化地图级别
        center: [104.10194, 30.65984], //初始化地图中心点位置
      });

      let toolBar = new AMap.ToolBar({
        position: {
          top: "110px",
          right: "40px",
        },
      });
      let controlBar = new AMap.ControlBar({
        position: {
          top: "10px",
          right: "10px",
        },
      });
      this.posmap.addControl(new AMap.Scale());
      this.posmap.addControl(toolBar);
      this.posmap.addControl(controlBar);
      this.posmap.setDefaultCursor("pointer");

      this.setmarker(val);
    },
    // 初始化天地图
    initTMap(val) {
      console.log("initTMap==");
      this.tmap = new T.Map("posmap");
      this.tmap.centerAndZoom(new T.LngLat(104.087715, 30.567811), 12);
      this.tmap.enableScrollWheelZoom(true);

      this.tmapSetmarker(val);
    },
    setmarker(obj) {
      console.log("==marker=======ssss", obj);

      if (this.marker) {
        this.marker.setMap(null);
      }
      var position = new AMap.LngLat(obj.gdLng, obj.gdLat);
      console.log("==position=======", position);
      this.posmap.setCenter(position);

      let icon = new AMap.Icon({
        image: obj.defaultIcon,
        size: new AMap.Size(50, 50),
        imageSize: new AMap.Size(50, 50),
      });

      this.marker = new AMap.Marker({
        position: position,
        icon: icon,
        label: {
          content:
            "<div style='height:14px;padding:2px;border:1px solod blue;'><span style='background:#f39c12;color:#fff;'>" +
            obj["hbCarNo"] +
            "</span></div>",
          offset: new AMap.Pixel(-10, -20),
          direction: "top",
        },
        extData: obj,
        offset: new AMap.Pixel(-10, -27),
      });

      this.marker.on("click", (e) => {
        console.log(e, obj);
        this.popdata = obj;
        this.popdata.show = true;

        let infoWindow = new AMap.InfoWindow({
          isCustom: true, //使用自定义窗体
          autoMove: true,
          closeWhenClickMap: true,
          content: this.$refs.pop,
          size: new AMap.Size(12, 12),
          offset: new AMap.Pixel(16, -45),
          // position: marker.getPosition(),
          retainWhenClose: true,
        });

        infoWindow.open(this.posmap, e.target.getPosition());
      });

      this.posmap.add(this.marker);

      // this.posmap.add(this.marker);
    },
    tmapSetmarker(val) {
      console.log("====tmapSetmarker", val);
      let dataArr = [val];
      var that = this;
      dataArr.forEach((e, i) => {
        //设置显示地图的中心点和级别
        if (i == 0) {
          this.tmap.centerAndZoom(new T.LngLat(e.lng, e.lat), 13);
        }
        //创建标注对象
        let pt = new T.LngLat(e.lng, e.lat);
        // 设置自定义图标
        let icon = new T.Icon({
          iconUrl: e.defaultIcon, // 设置图标 URL
          iconSize: new T.Point(50, 50), // 图标大小
          iconAnchor: new T.Point(25, 50), // 图标锚点
        });
        let marker = new T.Marker(pt, { icon: icon });
        // 标注的文字标签
        let label = new T.Label({
          text: e.hbCarNo,
          position: pt,
          offset: new T.Point(-50, -65),
        });
        this.tmap.addOverLay(label);

        // 标注点击事件
        marker.addEventListener("click", function () {
          // console.log(that.$refs.pop);
          that.popdata = e;
          that.popdata.show = true;
          // 创建自定义信息窗口
          let infoBox = new T.InfoWindow(that.$refs.pop, {
            offset: new T.Point(0, -30),
            closeOnClick: true, //允许点击地图关闭窗口
            closeButton: false, //是否显示关闭按钮
          });
          that.tmap.openInfoWindow(infoBox, pt);
        });

        //向地图上添加标注
        this.tmap.addOverLay(marker);
      });
    },
    init(val) {
      console.log(1111, val);
      this.positiongShow = true;
      this.$nextTick(() => {
        this.popdata = val;
        if (val.mapType === "GMAP") {
          this.initmap(val);
        } else if (val.mapType === "TMAP") {
          this.initTMap(val);
        }
      });
    },
    carBrandCheckval() {
      this.positiongShow = false;
    },
  },
};
</script>

<style lang="scss" scoped>
p {
  margin: 0;
}
.dialog-content {
  z-index: 999;
  .posMap {
    position: absolute;
    height: 100%;
    width: 100%;
  }
}
::v-deep .el-dialog__body {
  padding: 0;
}
.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
.flex {
  display: flex;
}
.markerStyle {
  display: flex;
  font-size: 12px;
  background: #ebe9e5;
  padding: 15px 12px !important;
  line-height: 18px !important;
  border-radius: 5px;
  box-shadow: 1px 3px 8px #555 !important;
  box-sizing: border-box;
}
::v-deep .tdt-infowindow-content {
  margin: 0 !important;
}
</style>
